<template lang="">
    <div>
        <el-input v-model="input" 
                    placeholder="请输入关键词">
            <template #suffix>
                <el-button style="border:1px blue solid; margin:5px;width:50px ;background-color:#00B4F4">                 
                    <el-icon color="white"><Search /></el-icon>
                    <span style="color:white">搜索</span>
                </el-button>
                <!-- 点击添加有东西 -->
                <el-button style="border:1px blue solid; margin:5px;width:50px ;background-color:#00B4F4" 
                    class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                    <el-icon color="white"><CirclePlusFilled /></el-icon>
                     <span style="color:white">发布</span>
                </el-button>
                <!-- 模态框 -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                           <div class="modal-dialog">
		                        <div class="modal-content">
			                        <div class="modal-header">
				                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				                         <h4 class="modal-title" id="myModalLabel">丢了东西都可以在这里寻到！！！</h4>
			                        </div>
			                        <div class="modal-body">
				                        <ul type="none">
                                            <li>*遗失物<el-input placeholder="请输入关键词" style="width:300px"></el-input></li>
                                            <li>*遗失地<el-input placeholder="请输入关键词" style="width:300px"></el-input></li>
                                            <li>*遗失时间<el-input placeholder="请输入关键词" style="width:300px"></el-input></li>
                                            <li>*联系人<el-input placeholder="请输入关键词" style="width:300px"></el-input></li>
                                            <li>*联系电话<el-input placeholder="请输入关键词" style="width:300px"></el-input></li>
                                        </ul>
			                        </div>
			                        <div class="modal-footer">
				                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				                        <button type="button" class="btn btn-primary">发布</button>
			                        </div>
		                        </div><!-- /.modal-content -->
	                        </div><!-- /.modal -->
                </div>
            </template>
        </el-input>
        <el-row class="select">
            <el-button dark
            v-for="item in selects">{{item}}</el-button>
        </el-row>
        <div class="panel panel-default" v-for="item in finds">
            <div class="panel-body" >
                 <span>{{item.thing}}</span>于<span>{{item.time}}</span>在<span>{{item.place}}</span>
                遗失，希望拾到的好心人能尽快联系。
                <p>{{item.time}}</p>
            </div>
        </div>
    </div>
</template>
<script>
import { Search ,CirclePlusFilled} from '@element-plus/icons-vue';
export default {
    components:{
        Search,CirclePlusFilled
    },
    data () {
        return {
            selects:["全部","钱包","手机","文件资料","其他"],
            finds:[
                {thing:"aa",time:"2022/12/05 17:56:00",place:"石井","call":15454545},
                {thing:"bb",time:"2022/12/07 17:56:00",place:"dadhiqw","call":15454545},
                {thing:"cc",time:"2022/12/08 17:56:00",place:"汕头","call":15454545},
                {thing:"dd",time:"2022/2/05 17:56:00",place:"潮阳","call":15454545},
            ]

        }
    }
}
</script>
<style lang="less" scoped>
    .panel{
        margin-top: 10px;
    }
    .panel .panel-body{
        border: 1px black solid;
        background-color: aquamarine;
        border-radius: 5%;
    }
    .panel-body span{
        font: bolder 16px bolder;
    }
    .panel-body p{
        font-style: italic;
    }
</style>